<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* reset css */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, sans-serif;
            color: #e3d0d0;
            background-color: #fff;
            line-height: 1.5;
        }

        img {
            vertical-align: middle;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .cf::after {
            content: '';
            display: block;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .m-r10 {
            margin-right: 10px;
        }

        .m-t10 {
            margin-top: 10px;
        }

        .m-b10 {
            margin-bottom: 10px;
        }

        .m-auto {
            margin: 0 auto;
        }

        /* 样式代码 */
        .main {
            width: 960px;
            background-color: #000000;
        }

        .top {
            width: 960px;
            background-color: #36a041;
        }

        .logo {
            width: 200px;
            height: 80px;
            background-color: #b31414;
        }

        .banner1 {
            width: 540px;
            height: 80px;
            background-color: #478e14;

        }

        .banner2 {
            width: 200px;
            height: 80px;
            background-color: #91e4b1;
        }

        .menu {
            width: 960px;
            height: 30px;
            background-color: #3b36a5;
        }

        .content {
            height: 410px;
            background-color: #901484;
        }

        .column1 {
            width: 370px;
            height: 200px;
            background-color: aquamarine;
        }


        .column2 {
            width: 180px;
            height: 200px;
            background-color: rgb(32, 29, 138);
            margin-top: 10px;
        }


        .column3 {
            width: 200px;
            height: 130px;
            background-color: rgb(148, 146, 208);
        }

        .column3:nth-child(n+2) {
            margin-top: 10px;
        }

        .group-one {
            height: 410px;
            width: 750px;
            background-color: rgb(152, 185, 218);
        }

        .group-two {
            height: 410px;
            width: 200px;
        }

        .footer {
            height: 60px;
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="main m-auto">
        <div class="top cf">
            <div class="logo fl m-r10"></div>
            <div class="banner1 fl"></div>
            <div class="banner2 fr"></div>
        </div>
        <div class="menu m-t10"></div>
        <div class="content m-t10 cf">
            <div class="group-one fl cf">
                <div class="column1 fl m-r10">栏目一</div>
                <div class="column1 fl">栏目二</div>
                <div class="column2 fl m-r10">栏目三</div>
                <div class="column2 fl m-r10">栏目四</div>
                <div class="column2 fl m-r10">栏目五</div>
                <div class="column2 fl">栏目六</div>
            </div>
            <div class="group-two fr cf">
                <div class="column3 fr">栏目七</div>
                <div class="column3 fr">栏目八</div>
                <div class="column3 fr">栏目九</div>
            </div>
        </div>
        <div class="footer m-t10"></div>
    </div>
</body>

</html>